<template lang="pug">
//- div(style='padding: 40px 80px 40px 40px')
div(v-if='slideshow')
  Breadcrumb
    BreadcrumbItem 图文模块
    BreadcrumbItem(href='/slideshows') 图文管理
    BreadcrumbItem {{ slideshow.title }}
  Row
    Col(:span=24)
      Form(:model='formData', :label-width=60)
        FormItem(label='封面')
          CoverUploader(@on-upload='onCoverUpload', :defaultCover='slideshow.picture.url')
        FormItem(label='标题')
          Input(v-model='formData.title')
        FormItem(label='链接')
          Input(v-model='formData.link', placeholder='副标题、关键词等，可不填')
        //- FormItem(label='摘要')
          Input(type='textarea', :rows=3, :maxlength=80, v-model='formData.abstract', placeholder='不超过80字')
        //- FormItem(label='分类')
          SelectCategory(:defaultValue='article.category.id', module='article', @change='setCategory')
        //- FormItem
          Editor(v-model='formData.body')
        //- FormItem(label='图册')
          GalleryUploader(v-model='formData.gallery')
        FormItem(label='发布')
          i-switch(v-model='formData.published')
            Icon(type='android-done', slot='open')
            Icon(type='android-close', slot='close')
        FormItem
          Button(type='primary', @click='submit', :loading='loading') {{ loading ? '保存中...' : '保存' }}
    //- Col(:span=12)
      Affix(:offset-top=20)
        div.article-preview.pull-right
          h2 {{ formData.title }}
          div.ql-snow
            div.ql-editor(v-html='formData.body', style='padding: 0')
          //- quill-editor(v-model='formData.body', :options='previewEditorOptions')
</template>

<script>

import CoverUploader from '@/components/CoverUploader'
import Api from '@/apis/slideshow'

export default {
  beforeRouteEnter (to, form, next) {
    Api.getSlideshowDetail(to.params.id).then(slideshow => {
      next(vm => {
        vm.slideshow = slideshow
        vm.formData.id = slideshow.id
        vm.formData.published = slideshow.published
        vm.formData.title = slideshow.title
        vm.formData.link = slideshow.link
        vm.formData.picture = slideshow.picture.id
      })
    })
  },
  components: {
    CoverUploader
  },
  data () {
    return {
      loading: false,
      slideshow: null,
      formData: {
        id: '',
        title: '',
        link: '',
        picture: null,
        status: false
      }
    }
  },
  methods: {
    validate () {
      return this.formData.title.trim() && this.formData.link
    },
    submit () {
      if (this.validate()) {
        this.loading = true
        Api.patchSlideshow(this.formData).then(() => {
          this.loading = false
          this.$router.push('/slideshows', () => {
            this.$Message.success('更新成功')
          })
        })
      } else {
        this.$Message.error('data incomplete')
      }
    },
    onCoverUpload (file) {
      this.formData.picture = file.id
    }
  }
}
</script>

<style lang="less">
.quill-editor .ql-container {
  height: 300px;
}

.article-cover-uploader {
  .ivu-upload-select {
    width: 100%; // padding-bottom: 66.7%;
    // height: 0;
  }
}


.article-preview {
  // margin: 0 10px;
  padding: 10px; // height: 100%;
  width: 375px;
  height: 667px;
  overflow-y: scroll;
  border: 5px solid #eee;

  .quill-editor {
    height: 100%;
  }
}

</style>

